<template>
  <div>
    <!-- <div @dblclick="dell" id="d1"><div @dblclick.stop="del" id="d2"></div></div>
   <a href="https://blog.csdn.net/" v-on:click.stop.prevent="fu">点击一下</a></div> -->
    <div id="d1" @click.capture="d1">
      <div id="d2" @click.capture="d2"><div id="d3" @click="d3"></div></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //事件.stop阻止事件冒泡
    //事件.prevent阻止默认事件比如href src 等等....
    //事件.apture
    // del() {
    //   console.log("in");
    // },
    // dell() {
    //   console.log(123);
    // },
    // fu() {
    //   console.log("in");
    // },
    d1() {
      console.log(1);
    },
    d2() {
      console.log(2);
    },
    d3() {
      console.log(3);
    },
  },
};
</script>
<style lang="css">
#d1 {
  width: 200px;
  height: 300px;
  border: 1px solid #000;
}
#d2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
#d3 {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
</style>

